<template>
    <div :id="idName"></div>
</template>

<script>
import { Chart } from '@antv/g2'
export default {
    props: {
        idName: {
            type: String,
            default: 'c5',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: Number,
            default: 300,
        },
        axis: {
            type: [Boolean, Object],
            default: true,
        },
        label: {
            type: [String, Boolean],
            default: false,
        },
    },
    watch: {
        chartData(val) {
            this.chart.changeData(val)
        },
    },
    data() {
        return {
            chart: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.render()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
            })
            // Step 2: 载入数据源
            this.chart.data(this.chartData)
            this.chart.scale('value', {
                alias: '占比（%）',
            });
            this.chart.axis('key', {
                tickLine: null,
                line: null,
            });
            this.chart.axis('value', {
                label: null,
                title: {
                    style: {
                    fontSize: 14,
                    fontWeight: 300,
                    },
                },
                grid: null,
            });
            // Step 3：创建图形语法，绘制柱状图，由 value 和 key 两个属性决定图形位置，key 映射至 x 轴，value 映射至 y 轴
                this.chart.legend({
                position: 'top',
            });
            this.chart.coordinate('rect').transpose();
            this.chart.tooltip({
                shared: true,
                showMarkers: false,
            });
            this.chart.interaction('active-region');
            this.chart
                .interval()
                .adjust('stack')
                .position('key*value')
                .color('type*key', (type, key) => {
                    if (type === '普通订单') {
                    return '#1890ff';
                    }
                    if (type === '争议中的订单') {
                    return '#ff9d4e';
                    }
                    if (type === '败诉订单') {
                    return '#f0f2f3';
                    }
                })
                .size(26)
                .label('value*type', (val, t) => {
                    const color = t === '普通订单' ? 'white' : '#47494b';
                    if (val < 0.05) {
                    return null;
                    }
                    return {
                    position: 'middle',
                    offset: 0,
                    style: {
                        fontSize: 12,
                        fill: color,
                        lineWidth: 0,
                        stroke: null,
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, .45)',
                    },
                    };
                });
            // .color('key')
            // Step 4: 渲染图表
            this.chart.render()
        },
    },
}
</script>
